<script>
import request from "../../common/request";

export default {
  data(){
    return {
      walletData:{}
    }
  },
  onLoad() {
    this.getWallet();
  },
  methods: {
    tx(){
      if (!Number(this.walletData.money)) return uni.showToast({
        title:'账户余额不足',
        icon:'none'
      });
      request({
        url:'/d/money/add',
        method:'post',
        data:{
          money:Number(this.walletData.money)
        }
      }).then(()=>{
        uni.showToast({
          title:'提现成功',
          icon:'none'
        });
        this.getWallet();
      })
    },
    getWallet(){
      request({
        url:'/d/money/userMoney'
      }).then(res=>this.walletData = res.data);
    }
  },
}
</script>

<template>
<view class="wallet">
    <view class="content">
      <text>总余额</text>
      <text>{{walletData.money}}</text>
      <view>
        <text>可提现(元)</text>
        <text>{{walletData.money}}元</text>
      </view>
      <view>
        <view>
          <text>待入账(元)</text>
          <text>{{walletData.drz}}元</text>
        </view>
        <view>
          <text>提现中(元)</text>
          <text>{{walletData.txz}}元</text>
        </view>
        <view>
          <text>已提现(元)</text>
          <text>{{walletData.ytxs}}元</text>
        </view>
      </view>
      <view @click="tx">立即提现</view>
    </view>
</view>
</template>

<style scoped lang="scss">
view,text{
  box-sizing: border-box;
}
.wallet{
  width: 100vw;
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  background-image: url("/static/qb.png");
  background-size: 100% 750rpx;
  background-repeat: no-repeat;
  padding:200rpx 30rpx 0 30rpx;
  .content{
    width: 100%;
    height: 644rpx;
    background-image: url("/static/qb2.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    padding: 50rpx;
    >view:nth-of-type(3){
      width: 100%;
      height: 98rpx;
      background: #885FFF;
      box-shadow: 0rpx 5rpx 12rpx 0rpx rgba(72,30,192,0.35);
      border-radius: 49rpx;
      margin-top: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 36rpx;
      color: #FFFFFF;
    }
    >view:nth-of-type(2){
      display: grid;
      grid-template-columns: repeat(3,1fr);
      margin-top: 30rpx;
      >view{
        display: flex;
        flex-direction: column;
        text:last-child{
          font-weight: 500;
          font-size: 46rpx;
          color: #333;
          margin-top: 16rpx;
        }
        text:first-child{
          font-weight: 500;
          font-size: 26rpx;
          color: #666666;
        }
      }
    }
    >view:nth-of-type(1){
      display: flex;
      flex-direction: column;
      margin-top: 50rpx;
      text:last-child{
        font-weight: 500;
        font-size: 46rpx;
        color: #F33131;
        margin-top: 16rpx;
      }
      text:first-child{
        font-weight: 500;
        font-size: 26rpx;
        color: #222222;
      }
    }
    text:nth-of-type(1){
      font-weight: 500;
      font-size: 30rpx;
      color: #222222;
    }
    text:nth-of-type(2){
      font-weight: bold;
      font-size: 54rpx;
      margin-top: 18rpx;
      color: #222222;
    }
  }
}
</style>